<template>
  <div class="performance">
    <div class="taskTitle">性能</div>
    <el-switch class="padding-x" active-text="圆形" inactive-text="线型" v-model="type"/>

    <div class="charts justify-around" :class="{'flex-row': type}">
      <div class="item">
        <div class="label">CPU</div>
        <el-progress  :type="type?'circle':'line'" :color="processColor(tableData[0])"  :text-inside="!type" :stroke-width="type?5:20" :percentage="tableData[0]"></el-progress>
      </div>
      <div class="item">
        <div class="label">内存{{$store.state.config.maxRam}}MB</div>
        <el-progress  :type="type?'circle':'line'" :color="processColor(tableData[1])" :text-inside="!type" :stroke-width="type?5:20" :percentage="tableData[1]"></el-progress>
      </div>

    </div>
  </div>

</template>

<script>
import config from "@/store/config"

export default {
  name: "Performance",
  data: () => ({
    randomSeed: 1,
    type: false,
  }),
  computed:{
    tableData() {
      let list = this.$store.state.windowList
      // cpu总和
      let cpu = list.reduce((previousValue, currentValue) => previousValue + currentValue.meta.cpu, 0)
      let percent = list.length / this.$store.state.config.maxProcess
      let data =  this.$store.state.windowList.map(item => ({
        ...item,
        cpu: (item.meta.cpu * (0.8 + 0.2 * Math.random()) / cpu * percent * this.randomSeed * 100),
        ram: (item.meta.cpu * (0.8 + 0.2 * Math.random()) / cpu * percent * this.randomSeed * 2000),
      }))
      return [data.reduce((p, c) => p + c.cpu,0).toFixed(2) * 1, (data.reduce((p, c) => p + c.ram,0)/config.maxRam*100).toFixed(2)*1]
    },
  },
  mounted() {
    this.processRandomSeed(0.8, 1)
  },
  beforeDestroy() {
    clearInterval(this.timer)
  },
  methods:{
    processRandomSeed(min, max, interval) {
      this.timer = setInterval(()=>{
        this.randomSeed = min + (max-min) * Math.random()
      }, interval || 1000)
    },
    processColor(percent) {
      return `rgb(${percent*10}, ${(1-percent)*10}, ${(1-percent)*10})`
    }
  }
}
</script>

<style scoped lang="scss">
@import "~@/assets/css/var";
  .charts{
    padding: 0 $pl;
    .item{
      margin: $ml 0;
      .label{
        margin-bottom: $ms;
      }
    }
  }
</style>
